<!-- 头部功能层 -->
<template>
  <div class="header-container">
    <div class="title">图片编辑</div>
    <div class="center" />
    <div class="tools">
      <el-button size="mini" @click="onConsole">debug</el-button>
      <el-button size="mini" @click="onPreview">预览</el-button>
      <el-divider direction="vertical" />
      <template v-if="isEdit">
        <el-button size="mini" @click="onReset">重置</el-button>
        <el-divider direction="vertical" />
        <el-button size="mini" @click="onCancelBack">取消并返回</el-button>
        <el-divider direction="vertical" />
        <el-button size="mini" @click="onSaveBack">保存并返回</el-button>
        <el-divider direction="vertical" />
      </template>
      <el-dropdown trigger="click" @command="onDownload">
        <el-button size="mini" type="primary" @click="onDeselect">
          下载<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" class="download-menu">
          <el-dropdown-item v-for="(item, index) of downLoadMenu" :key="index" :command="item" :disabled="disabled">
            <dl>
              <dt>{{item.name}}</dt>
              <dd>{{getSizeInfo(item)}}</dd>
            </dl>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DesignHeader',
  data () {
    return {
      disabled: false, // 防止重复点击
      isEdit: true, // 是否是编辑模式
      downLoadMenu: [{ // 下载尺寸倍数
        name: 'Web @1x',
        value: 1
      }, {
        name: 'Web @2x',
        value: 2
      }, {
        name: 'Web @3x',
        value: 3
      }]
    }
  },
  methods: {
    // 获取尺寸
    getSizeInfo (row) {
      return `200 x 400`
    },
    // 停用图层
    onDeselect () {

    },
    /* 以下功能按钮 */
    // debug
    onConsole () {},
    // 预览
    onPreview () {},
    // 重置
    onReset () {},
    // 取消并返回
    onCancelBack () {},
    // 保存并返回
    onSaveBack () {},
    // 下载
    onDownload (row) {
      this.disabled = true
      setTimeout(() => {
        this.disabled = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
.header-container {
  background: #fff;
  height: 40px;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 90;
}
  .title {
    font-weight: bold;
    color: #000;
  }
  .center {
    flex: 1
  }
  .download-menu .el-dropdown-menu__item {
    padding: 0 10px;
  }
  .download-menu dl,
  .download-menu dt,
  .download-menu dd {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .download-menu dl{ display: flex;}
  .download-menu dt{ flex: 1;}
  .download-menu dd{ font-size: 12px; color: #999; text-align: right; min-width: 110px;}
</style>